<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/10/24 01:42:03
  @file: btn-swiper.vue
  @description:
  ==================
  按钮组swiper
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="btn-swiper">
    <swiper ref="btnSwiper" :options="options" style="height:479px;">
      <swiper-slide class="swiper-no-swiping">
        <div class="btn" @click="changeLocal">1212</div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="btn">1212</div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="btn">1212</div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="btn">1212</div>
      </swiper-slide>
      <swiper-slide class="swiper-no-swiping">
        <div class="btn">1212</div>
      </swiper-slide>
      <!-- 按钮 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper/src/index';
export default {
  name: 'btn-swiper',
  components: { swiper, swiperSlide },
  data () {
    return {
      options: {
        direction: 'vertical',
        navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
        autoplay: false,
        slidesPerView: 5,
        noSwiping: true
      }
    };
  },
  methods: {
    changeLocal () { this.$emit('changeLocal'); }
  },
  props: {
    swiperList: { type: Array, require: true }
  },
  computed: {
    btnSwiper () { return this.$refs.btnSwiper.swiper; }
  }
};
</script>

<style lang='scss' scoped>
$font-size-huge: 12px;
$white: #ffffff;
// 个人命名
.btn-swiper {
  // swiper 容器
  .swiper-container {
    // swiper 外层包裹的
    .swiper-wrapper {
      // 每个swiper可以滑动的
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        font-size: $font-size-huge * 2;
        background-color: $white;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
